import React from 'react'
import { useNavigate, Outlet } from 'react-router-dom'
import { Tabbar } from '@nutui/nutui-react'
import { Bell, Globe, Home, User } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
export default function Footer(props) {
    let navigate = useNavigate()
    return (
        <div>
            <Tabbar defaultValue={props.index} fixed>
                <Tabbar.Item icon={<Home width={20} height={20} onClick={() => { navigate('/app/home') }} />} />
                <Tabbar.Item icon={<Globe width={20} height={20} onClick={() => { navigate('/app/dynamic') }} />} />
                <Tabbar.Item icon={<Bell width={20} height={20} onClick={() => { navigate('/app/talk') }} />} />
                <Tabbar.Item icon={<User width={20} height={20} onClick={() => { navigate('/homes') }} />} />
            </Tabbar>
        </div>
    )
}
